<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分与评论</title>
    <style>
        body {
            /* 设置背景图片 */
            background-image: url('https://images.unsplash.com/photo-1496450681664-3df85efbd29f?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
            background-size: cover; /* 让背景图覆盖整个屏幕 */
            background-repeat: no-repeat; /* 不重复背景图 */
            color: rgb(22, 21, 21); /* 设置文字颜色为黑色，以便于在图片上可读 */
        }

        .comment {
            border: none; /* 去掉边框 */
            border-radius: 8px; /* 圆角边框 */
            padding: 15px; /* 增加内边距 */
            margin-bottom: 15px; /* 增加底部间距 */
            background: rgba(255, 255, 255, 0.8); /* 背景色为白色且半透明 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            transition: transform 0.3s, box-shadow 0.3s; /* 添加平滑过渡效果 */
        }

        .comment:hover {
            transform: translateY(-2px); /* 鼠标悬停时轻微上移 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 鼠标悬停时增强阴影 */
        }
        .component-container {  
        border: 1px solid #ccc;  
        padding: 20px;  
        margin: 20px auto;  
        max-width: 600px;  
        background-color: #f9f9f9;  
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    }  
    .comment-section, .rating-section {  
        margin-bottom: 20px;  
    }  
    label {  
        display: block;  
        margin-bottom: 5px;  
    }  
    textarea, input[type="number"] {  
        width: 100%;  
        padding: 10px;  
        box-sizing: border-box;  
    }  
    </style>
</head>
<body>
    <div class="component-container">   
        <div class="rating-section">  
            <label for="rating">评分（1-10分）0分默认不评分：</label>  
            <input type="number" id="rating" name="rating" min="0" max="10" />  
        </div>  
        <!-- 评论区域 -->  
        <div class="comment-section">  
            <label for="comment">评论：</label>  
            <textarea id="comment" name="comment" rows="4" cols="50"></textarea>  
        </div> 
        <!-- 可以添加提交按钮或其他交互元素 -->  
        <button id="submit-btn">提交</button>  
    </div>  
      
    <style>  
        /* 父容器样式 */  
        #container {  
            display: flex;           /* 使用Flexbox布局 */  
            flex-direction: column;  /* 子元素垂直排列 */  
            align-items: center;     /* 子元素在交叉轴（水平方向）上居中 */  
            justify-content: center; /* 子元素在主轴（垂直方向）上居中（这里主要用于垂直居中，但不影响水平居中） */  
            text-align: center;      /* 确保文本和表单元素（如果它们是inline或inline-block）在水平方向上居中 */  
            margin-top: 100px;        /* 可选：增加顶部间距 */  
            max-width: 800px;        /* 设置最大宽度，确保内容不会超出屏幕宽度 */  
            margin: 0 auto;          /* 水平居中 */  
        }  
      
        #rating-section, #comment-section {  
            margin-top: 20px;  
            background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */  
            max-width: 80%; /* 继承父容器的最大宽度 */  
            border-radius: 8px; /* 圆角 */  
            padding: 15px; /* 内边距 */  
            max-width: 1200px;        /* 设置最大宽度，确保内容不会超出屏幕宽度 */  
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */  
        }  
      
        /* 其他样式保持不变 */  
        label {  
            font-weight: bold;  
            display: block;  
            margin-bottom: 8px;  
        }  
      
        input[type="number"], textarea {  
            width: 100%;  
            max-width: 95%; /* 使输入框和文本域不超过父容器的宽度 */  
            padding: 10px;  
            border: 1px solid #ccc;  
            border-radius: 4px;  
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);  
            font-size: 16px;  
            transition: border-color 0.3s;  
        }  
      
        input[type="number"]:focus, textarea:focus {  
            border-color: #1a3f77;  
            outline: none;  
        }  
      
        #submit-btn {  
            margin-top: 20px;  
            padding: 10px 20px;  
            background-color: #1a3f77;  
            color: white;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
            font-size: 16px;  
            transition: background-color 0.3s;  
        }  
      
        #submit-btn:hover {  
            background-color: #155b8d;  
        }  
    </style>

    <!-- 评论列表显示 -->
    <div class="comment-section">
        <h2>其他评论</h2>
        <div id="comment-list"></div>
        <div id="pagination">
            <button id="prev-page" disabled>上一页</button>
            <span id="current-page">1</span>
            <button id="next-page">下一页</button>
        </div>
    </div>

    <script src="rating.js"></script>
    
</body>
</html>
